<template>
  <div>
    <!-- 顶部 -->
    <TopBarma />
    <!-- 中间 -->
    <div class="main">
      <div class="main-content content">
        <!-- 滑动轮播 -->
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(v, i) in arr" :key="i">
            <img :src="v.imgsrc" alt class="main-baneer-img" />
            <div class="main-baneer-photo">
              <span>51</span>
            </div>
          </van-swipe-item>
        </van-swipe>
        <!-- 大唐不夜城 -->
        <div class="toplist">
          <div class="leftlist">
            <img src="mayingshuang/imgs/buyecheng.jpg" alt="" />
          </div>
          <div class="rightlist">
            <div class="main-title">
              <h1>大唐不夜城</h1>
            </div>
            <!-- 星星 -->
            <div class="main-star">
              <div class="main-light">
                <img src="mayingshuang/imgs/star.jpg" alt />
              </div>
              <div class="main-light">
                <img src="mayingshuang/imgs/star.jpg" alt />
              </div>
              <div class="main-light">
                <img src="mayingshuang/imgs/star.jpg" alt />
              </div>
              <div class="main-light">
                <img src="mayingshuang/imgs/star.jpg" alt />
              </div>
              <div class="main-light">
                <img src="mayingshuang/imgs/star.jpg" alt />
              </div>
              <div class="main-score">4.9</div>
              <div class="main-details">
                1.6万+条 &gt;
                <img src alt />
              </div>
              <div class="main-num">景点/周边 &gt;</div>
              <div></div>
            </div>
          </div>
        </div>

        <!-- 服务分 -->
        <div class="main-serve">
          <div class="main-serve-left">
            <!-- <div>服务:4.9</div>
            <div>环境:4.9</div>
            <div>划算:4.9</div> -->
          </div>
          <div class="main-serve-right">
            <div class="pet"></div>
            <div class="small">
              <span></span>
              <img src alt />
            </div>
          </div>
        </div>
        <!-- 榜单 -->
        <div class="main-list">
          <img src="mayingshuang/imgs/dianping.jpg" alt="" />
          <div class="main-name">入选2021年必玩榜</div>
        </div>
        <!-- 营业时间 -->
        <div class="business-hours">
          <p class="rest">今天开放</p>
          <p class="time">全天开放</p>
        </div>
        <!-- 收录 -->
        <div class="include">
          <div class="left">
            <p class="food">免费开放</p>
            <p class="thing">景区电话</p>
          </div>
          <div class="right">
            <p>简介攻略 &gt;</p>
          </div>
        </div>
        <!-- 地址 -->
        <div class="location">
          <div class="left">
            <p class="one">陕西省西安市雁塔区慈恩路46号</p>
            <p class="two">距地铁4号线大唐芙蓉园站D口步行910m</p>
          </div>
          <div class="right">
            <div class="dt">
              <p class="iconfont icon-ditu2" style="color: #f8683f"></p>
              <p style="color: #9ea09f">地图</p>
            </div>
            <span style="color: #f6f6f6">|</span>
            <div class="car">
              <p class="iconfont icon-car-full" style="color: #3170e0"></p>
              <p style="color: #9ea09f">打车</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分隔框 -->
    <div class="divide"></div>
    <!-- 二级路由 -->
    <div class="secrout">
      <router-link to="/admissionticket">门票</router-link>
      <router-link to="/playguide">游玩指南</router-link>
      <router-link to="/evaluatelist">评价问答</router-link>
      <router-link to="/searcharounds">搜索周边</router-link>
    </div>
    <!-- 底部固定栏 -->
    <!-- <FooterBar /> -->
    <router-view />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      current: 0,
      active: 0,
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Schart").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  width: 93.067vw;
  margin: auto;
}
.toplist {
  display: flex;
  justify-content: space-between;
  .leftlist {
    img {
      width: 13.6vw;
      height: 13.6vw;
    }
  }
  .rightlist {
    margin: -1.6vw 3.733vw 0 0;
  }
}
.main {
  width: 100vw;
  height: 112.733vw;
  .main-content {
    height: 117.733vw;
    position: relative;
    .main-baneer-img {
      width: 93.067vw;
      height: 50.133vw;
      border-radius: 1.6vw;
    }
    .main-baneer-photo {
      width: 11.2vw;
      height: 4.267vw;
      background: #55352a;
      color: #fff;
      font-size: 2.667vw;
      border-radius: 10.667vw;
      text-align: center;
      position: absolute;
      right: 3vw;
      bottom: 3vw;
      z-index: 999;
    }
    .main-title {
      margin: 2vw 0 1.75vw 0;
      h1 {
        font-size: 5.067vw;
      }
    }
    .main-star {
      display: flex;
      height: 4.267vw;
      font-size: 3.467vw;
      line-height: 4.267vw;
      .main-light {
        width: 4.267vw;
        height: 4.267vw;
        color: #f63;
        img {
          width: 3.733vw;
          height: 4.267vw;
        }
      }
      .main-score {
        color: #ff6633;
        font-weight: bolder;
      }
      .main-details,
      .main-num {
        margin-right: 3.2vw;
        margin-left: 3.2vw;
        position: relative;
        img {
          width: 1.6vw;
          height: 3vw;
          position: absolute;
          right: -3vw;
          bottom: 0.55vw;
        }
      }
    }

    .main-serve {
      display: flex;
      justify-content: space-between;
      // margin: 1.6vw 0 1.367vw 0;
      .main-serve-left {
        font-size: 3.467vw;
        display: flex;
      }
      .main-serve-right {
        font-size: 4vw;
        display: flex;
        .pet {
          margin-right: 2.133vw;
        }
        img {
          width: 1.6vw;
          height: 3vw;
        }
        .small span {
          margin-right: 2.133vw;
        }
      }
    }

    .main-list {
      display: flex;
      height: 8.333vw;
      border-bottom: 0.267vw solid #f4f4f4;
      img {
        width: 16.8vw;
        height: 5.333vw;
      }
      .main-name {
        background: linear-gradient(-248deg, #ffebcf 2%, #ffecdd 61%);
        color: #b15e2c;
        width: 26.733vw;
        height: 5.333vw;
        font-size: 3.2vw;
        padding: 0 1.6vw;
        line-height: 5.333vw;
      }
    }

    .business-hours {
      display: flex;
      height: 4vw;
      font-size: 3.467vw;
      line-height: 4vw;
      margin: 1.733vw 0 2.667vw 0;
      .rest {
        margin-right: 3.467vw;
      }
      .time {
        margin-right: 2.4vw;
      }
    }

    .include {
      display: flex;
      height: 5.067vw;
      font-size: 3.2vw;
      line-height: 5.067vw;
      text-align: center;
      margin-bottom: 2.4vw;
      .left {
        display: flex;
        justify-content: space-between;
        width: 28.733vw;
      }
      .right {
        color: grey;
        margin: -3.467vw 0 0 41.067vw;
      }
      .include-three {
        display: flex;
      }
      .three {
        width: 5.067vw;
        background: #fca94f;
        color: #ffffff;
      }
      .threes {
        background: #fdf1ea;
        color: #f5a041;
        font-size: 3.2vw;
        width: 14.667vw;
      }
      .food {
        width: 14.6vw;
        background: #f6f5f6;
      }
      .thing {
        width: 12.867vw;
        background: #f6f5f6;
      }
      .pet-shop {
        width: 16vw;
        background: #f6f5f6;
      }
    }

    .location {
      display: flex;
      justify-content: space-between;
      border-top: 0.267vw solid #f4f4f4;
      .left {
        font-size: 3.467vw;
        .one {
          color: #0d0d0d;
          margin: 3.467vw 0 1.133vw 0;
        }
        .two {
          color: #6b6b6b;
        }
      }
      .right {
        display: flex;
        margin-top: 4.267vw;
        text-align: center;
        justify-content: space-between;
        width: 19.467vw;
        font-size: 2.667vw;
        // .dt {
        //   width: 5.333vw;
        //   height: 5.333vw;
        //   border-right: 0.267vw solid grey;
        // }
      }
    }
  }
}
body {
  background: #ffffff;
}

.divide {
  background: #e6e6e8;
  width: 100vw;
  height: 2.667vw;
}
.secrout {
  width: 100%;
  height: 8vw;
  display: flex;
  // background-color: red;
  margin-top: 2.667vw;
  justify-content: space-around;
  line-height: 8vw;
  a {
    color: #0d0d0d;
    font-size: 3.733vw;
    font-weight: bold;
  }
}
</style>
<style >
.van-swipe__indicators {
  display: none !important;
}
</style>













